<template>
	<el-tabs tab-position="left" @tab-click="handleClick" class="tab">
		<el-tab-pane :label="item.label" v-for="(item, idx) in list" :key="idx">
			<div
				v-for="child in item.children"
				@mousedown="$emit('mousedown', $event, item.type, child.type)"
				@dragstart="$emit('dragstart', $event, item.type, child.type)"
				:key="child.id"
				:data-index="child.type"
				:draggable="draggable"
				class="container"
			>
				<div class="label">{{ child.label }}</div>
				<div class="img" v-if="item.type !== 'text'">
					<img :src="child.url" />
				</div>
				<div v-else class="box" :class="child.type">
					<div class="box-content">
						<slot name="content">{{ child.label }}</slot>
					</div>
					<div class="angle-border left-top-border"></div>
					<div class="angle-border right-top-border"></div>
					<div class="angle-border left-bottom-border"></div>
					<div class="angle-border right-bottom-border"></div>
				</div>
			</div>
		</el-tab-pane>
	</el-tabs>
</template>
<script>
import { mapState,mapActions  } from 'vuex';
export default {
  props: {
    draggable: {
      type: String,
    }
  },
  async  created() {
    await this.asideData()
  },
  data() {
    return {}
  },
  computed: {
    ...mapState('home', ['list']),
  },
  methods: {
    ...mapActions('home', ['asideData']),
    handleClick() {},
  },
}
</script>

<style scoped>
.tab {
	width: 200px;
	height: 100%;
	overflow: hidden;
}
img {
	object-fit: cover;
	width: 110px;
	height: 80px;
	overflow: hidden;
}
.red {
	color: red;
}
.yellow {
	color: yellow;
}
.blue {
	color: blue;
}
.label {
	width: 110px;
	height: 24px;
	line-height: 24px;
	box-sizing: border-box;
	color: #666;
}
.box {
	position: relative;
	overflow: auto;
	overflow-x: hidden;
	border: 1px solid #409eff;
    box-sizing: border-box;
	width: 110px;
	height: 80px;
    background-color: rgb(255, 255, 255);
	text-align: center;
}
.container {
	width: 110px;
	height: 104px;
	padding: 0 4px;
	box-shadow: border-box;
	margin: 4px 0;
}
.box-content {
	width: 110px;
	height: 100%;
}
.title {
	position: absolute;
	z-index: 2;
	margin-left: 5px;
	font-size: 16px;
	color: #409eff;
}

.angle-border {
	position: absolute;
	width: 8px;
	height: 8px;
}

.left-top-border {
	top: 0;
	left: 0;
	border-top: 2px solid #409eff;
	border-left: 2px solid #409eff;
    box-sizing: border-box;
}

.right-top-border {
	top: 0;
	right: -1px;
	border-top: 2px solid #409eff;
	border-right: 3px solid #409eff;
    box-sizing: border-box;
}

.left-bottom-border {
	bottom: 0;
	left: 0;
	border-bottom: 2px solid #409eff;
	border-left: 2px solid #409eff;
    box-sizing: border-box;
}

.right-bottom-border {
	right: -1px;
	bottom: 0;
	border-right: 3px solid #409eff;
	border-bottom: 2px solid #409eff;
    box-sizing: border-box;
}
</style>
